<template>
  <el-table
    :data="userList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="ID"
      prop="id"
      width="100">
    </el-table-column>
    <el-table-column
      label="名字"
      prop="name"
      width="100">
    </el-table-column>
    <el-table-column
      label="性别"
      prop="sex"
      width="100">
    </el-table-column>
    <el-table-column
      prop="birthday"
      label="出生日期">
    </el-table-column>
    <el-table-column
      prop="registTime"
      label="注册日期">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入名字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">编辑
        </el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "Home",
  methods:{
    handleEdit(row){
      this.$router.push(`/userEdit/${row.id}`);
    },
    handleDelete(row){
      console.log(row)
      let vm = this;
      // 发送删除数据的请求
      this.axios({
        url:`http://localhost:9090/vue/user/${row.id}`,
        method:'get'
      }).then(function (res) {
        // 判断是否删除成功
        if(res.data.code == 0){
          vm.$message.success('删除成功');
          // 查询一下用户列表
          vm.getUserList();
        }
      }).catch(function (err) {
        vm.$message.error('删除失败');
      });
    },
    // 查询所有用户的方法
    getUserList(){
      // 发送axios请求
      let vm = this;
      this.axios({
        url:'http://localhost:9090/vue/users',
        method:'get'
      }).then(function (res) {
        vm.userList = res.data.data.list;
      })
    }
  },
  data() {
    return {
      user: this.$store.getters.getUser,//从store中取出来数据
      userList:[],
      search:''
    }
  },
  mounted() {
    // 页面挂载完成后,查询用户
    this.getUserList();
  }
}
</script>

<style scoped>

</style>
